<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>轮播图</title>
    <script src="http://cdn.bootcss.com/jquery/1.10.1/jquery.js"></script>
    <style type="text/css">
    .width-1000 {
        width: 1000px;
        margin: 10px auto;
    }

    .block-101 {
        width: 500px;
        height: 600px;
        margin: 0 auto;
    }

    .block-101 .slide-focus {
        bottom: -50px;
        text-align: center;
    }

    .block-101 .block-content {
        height: 200px;
    }

    .block-102 {
        width: 500px;
        height: 300px;
        overflow: hidden;
        margin: 0 auto;
    }

    .block-102 .slide-focus {
        bottom: 10px;
        text-align: right;
    }
    h1{
        margin: 20px auto;
        font-weight: 300;
        color: red;
        font-size: 20px !important;
        text-align: center;
    }
    </style>
</head>

<body>
    <h1>左右轮播
            </h1>
    <div class="block-101">
        <div class="block-content">
            <div class="slide-1">
                <div class="slide-ct">
                    <ul class="slide-wp">
                        <li><img src="http://img6.cache.netease.com/photo/0003/2017-05-10/CK2CSMB000AJ0003.jpg">
                            <p class="pstyle">1</p>
                        </li>
                        <li><img src="http://img6.cache.netease.com/photo/0003/2017-05-10/CK2CSMB000AJ0003.jpg">
                            <p class="pstyle">2</p>
                        </li>
                        <li><img src="http://img6.cache.netease.com/photo/0003/2017-05-10/CK2CSMB000AJ0003.jpg">
                            <p class="pstyle">3</p>
                        </li>
                        <li><img src="http://img6.cache.netease.com/photo/0003/2017-05-10/CK2CSMB000AJ0003.jpg">
                            <p class="pstyle">4</p>
                        </li>
                        <li><img src="http://img6.cache.netease.com/photo/0003/2017-05-10/CK2CSMB000AJ0003.jpg">
                            <p class="pstyle">5</p>
                        </li>
                        <li><img src="http://img6.cache.netease.com/photo/0003/2017-05-10/CK2CSMB000AJ0003.jpg">
                            <p class="pstyle">6</p>
                        </li>
                    </ul>
                </div>
                <div class="slide-focus">

                </div>
                <div class="slide-btn">
                    <a href="javascript:;" class="enext"> &gt; </a>
                    <a href="javascript:;" class="eprev"> &lt; </a>
                </div>
            </div>
        </div>
    </div>
    <h1>透明轮播
            </h1>
    <div class="block-102">
        <div class="block-content">
            <div class="slide-2">
                <div class="slide-wp">
                    <ul class="slide-wp">
                        <li><img src="http://img6.cache.netease.com/photo/0003/2017-05-10/CK2CSMB000AJ0003.jpg">
                            <p class="pstyle">1</p>
                        </li>
                        <li><img src="http://img6.cache.netease.com/photo/0003/2017-05-10/CK2CSMB000AJ0003.jpg">
                            <p class="pstyle">2</p>
                        </li>
                        <li><img src="http://img6.cache.netease.com/photo/0003/2017-05-10/CK2CSMB000AJ0003.jpg">
                            <p class="pstyle">3</p>
                        </li>
                        <li><img src="http://img6.cache.netease.com/photo/0003/2017-05-10/CK2CSMB000AJ0003.jpg">
                            <p class="pstyle">4</p>
                        </li>
                        <li><img src="http://img6.cache.netease.com/photo/0003/2017-05-10/CK2CSMB000AJ0003.jpg">
                            <p class="pstyle">5</p>
                        </li>
                        <li><img src="http://img6.cache.netease.com/photo/0003/2017-05-10/CK2CSMB000AJ0003.jpg">
                            <p class="pstyle">6</p>
                        </li>
                    </ul>
                </div>
                <div class="slide-focus">

                </div>
                <div class="slide-btn">
                    <a href="javascript:;" class="enext"> &gt; </a>
                    <a href="javascript:;" class="eprev"> &lt; </a>
                </div>
            </div>
        </div>
    </div>
    <div class="width-1000">
        <h1>每次滑一小块
            </h1>
        <div class="block-103 block-103-item1">
            <div class="block-content">
                <div class="wrap">
                    <span class="btn prev"></span>
                    <div class="tab-wrap">
                        <ul class="content-58 clearfix">
                            <li class="content pull-left">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <span class="btn next">
                </span>
                </div>
            </div>
        </div>
        <h1>每次滑一屏
            </h1>
        <div class="block-103 block-103-item2">
            <div class="block-content">
                <div class="wrap">
                    <span class="btn prev"></span>
                    <div class="tab-wrap">
                        <ul class="content-58 clearfix">
                            <li class="content pull-left">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                            <li class="pull-left content">
                                <a href="#" target="_blank">
                                    <div class="content-top">
                                        <img src="http://188soft.test.zhuazi.com/d/file/sorts/26/2017-05-02/8a265acdfd31958a30dcad43787da1c9.png">
                                        <span>王泽荣耀</span>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <span class="btn next">
                </span>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    $(function() {

        // 最外层block 必须有宽高
        // 左右滑用这个
        var slid1 = new slid('.slide-1', {
            time: 1000, //时间
            type: 1, //1 左右
            auto: false, //自动播放
            focus: true //不写就不出导航小圆点
        });
        // 透明用这个
        var slid2 = new slid('.slide-2', {
            time: 2000,
            type: 2,
            auto: true,
            focus: true
        })


        //每次滑一小块
        itmeSlide('.block-103-item1', 8) //父元素，一屏包几块
        //每次滑一屏
        itmeSlide('.block-103-item2', 8, 8, 1) //父元素,一屏包几块,每次移动几块，共移动几次（默认1）
    })
    </script>
</body>

</html>
